<template>
    <require from="./em-blog-content.css"></require>
    <div class="em-blog-content-wrapper">
        <div click.delegate="dimmerHandler()" class="ui inverted dimmer"></div>
        <div show.bind="blog" class="em-blog-content">
            <div class="topbar">
                <div class="ui breadcrumb">
                    <a class="section" href="#/blog">TMS博文</a>
                    <div show.bind="blog.space" class="divider"> / </div>
                    <a show.bind="blog.space" class="section active">${blog.space.name}</a>
                    <span if.bind="isSuper || blog.creator.username == loginUser.username" data-tooltip="${blog.privated ? '私有博文,点击可公开' : '公开博文,点击可关闭'}" data-position="right center" style="margin-left: 16px;"><i click.delegate="updatePrivatedHandler()" class="link icon ${blog.privated ? 'lock' : 'unlock alternate'}"></i></span>
                    <span if.bind="(isSuper || blog.creator.username == loginUser.username) && blog.openEdit" data-tooltip="开放编辑中,点击可关闭" data-position="right center" style="margin-left: 8px; top: -1px;"><i click.delegate="openEditHandler()" class="link icon write"></i></span>
                </div>
                <div class="actions">
                    <a if.bind="dir" class="ui basic mini button" title="博文目录 (d)" click.delegate="catalogHandler()">
                        <i class="unordered list icon"></i> 目录
                    </a>
                    <a if.bind="blog.openEdit || isSuper || blog.creator.username == loginUser.username" title="博文编辑 (e | ctrl+dblclick)" class="ui basic mini button" click.delegate="editHandler()">
                        <i class="large icon edit"></i> 编辑
                    </a>
                    <a title="${!blogFollower ? '关注' : '取消关注'}博文更新 (f)" class="ui basic mini button" click.delegate="followerHandler()">
                        <i class="${!blogFollower ? 'unhide' : 'hide'} large icon"></i> ${!blogFollower ? '关注' : '取消'}
                    </a>
                    <em-blog-share view-model.ref="blogShareVm" blog.bind="blog"></em-blog-share>
                    <div ui-dropdown-action class="ui top right pointing dropdown basic mini icon button">
                        <i class="large ellipsis horizontal icon"></i>
                        <div class="menu">
                            <div click.delegate="refreshHandler()" class="item">
                                <span class="description">alt + r</span>
                                <i class="refresh icon"></i> 刷新
                            </div>
                            <div click.delegate="historyHandler()" class="item">
                                <span class="description">alt + h</span>
                                <i class="history icon"></i> 历史
                            </div>
                            <div if.bind="isSuper || blog.creator.username == loginUser.username" click.delegate="authHandler()" class="item">
                                <span class="description">alt + l</span>
                                <i class="lock icon"></i> 限制
                            </div>
                            <div click.delegate="stowHandler()" class="item">
                                <span class="description">alt + s</span>
                                <i class="${!blogStow ? 'empty' : ''} star icon"></i> ${!blogStow ? '收藏' : '删除收藏'}
                            </div>
                            <div click.delegate="copyHandler()" class="item">
                                <span class="description">alt + c</span>
                                <i class="copy icon"></i> 复制
                            </div>
                            <div if.bind="isSuper || blog.creator.username == loginUser.username" click.delegate="updateSpaceHandler()" class="item">
                                <span class="description">alt + m</span>
                                <i class="exchange icon"></i> 移动
                            </div>
                            <div if.bind="isSuper || blog.creator.username == loginUser.username" click.delegate="openEditHandler()" class="item">
                                <span class="description">alt + o</span>
                                <i class="write icon"></i> ${blog.openEdit ? '关闭编辑' : '开放编辑'}
                            </div>
                            <div class="divider"></div>
                            <a href="/admin/blog/download/${blog.id}?type=pdf" class="item">
                                <i class="file pdf outline icon"></i> 导出为PDF
                            </a>
                            <a href="/admin/blog/download/${blog.id}?type=md" class="item">
                                <i class="file text outline icon"></i> 导出为Markdown
                            </a>
                            <div if.bind="isSuper || blog.creator.username == loginUser.username" class="divider"></div>
                            <div if.bind="isSuper || blog.creator.username == loginUser.username" click.delegate="deleteHandler()" class="item" style="color: red;">
                                <span class="description">ctrl + alt + d</span>
                                <i class="trash outline icon"></i> 删除
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header">
                <h1 class="ui header">${blog.title}
                <div class="sub header">
                    <i class="wait icon"></i> <a class="author" data-value="${blog.creator.username}">${blog.creator.username == loginUser.username ? '自己' : blog.creator.name}</a> 创建于 <span data-timeago="${blog.createDate}" title="${blog.createDate | date}">${blog.createDate | timeago}</span>, <a class="author" data-value="${blog.updater.username}">${blog.updater.username == loginUser.username ? '自己' : blog.updater.name}</a> 最后修改于 <span data-timeago="${blog.updateDate}" title="${blog.updateDate | date}">${blog.updateDate | timeago}</span>
                    <span click.delegate="refreshHandler()" class="readCnt" show.bind="blog.readCnt" title="点击刷新博文 (alt+r)"><i class="unhide icon"></i>浏览: <a>${blog.readCnt}</a> 次</span>
                    <span click.delegate="commentsHandler()" class="commentCnt" show.bind="comments" title="点击快速去评论 (r)"><i class="comments outline icon"></i>评论: <a>${comments.length}</a></span>
                </div>
            </h1>
            </div>
            <div swipebox ref="mkbodyRef" class="markdown-body" innerhtml.bind="blog.content | parseMd | emoji:mkbodyRef"></div>
            <div class="footer">
                <span click.delegate="rateHandler()" class="rate"><i class="link icon thumbs outline up"></i>${blog.voteZan && blog.voteZan.split(',').includes(loginUser.username) ? '踩' : '赞'}</span> <span show.bind="!blog.voteZanCnt">成为第一个赞同者</span> <span show.bind="blog.voteZan && blog.voteZan.split(',').includes(loginUser.username)">你赞了它</span> <span show.bind="blog.voteZan && !blog.voteZan.split(',').includes(loginUser.username)" title="${blog.voteZan}"><a href="javascript:void(0);">${blog.voteZanCnt}</a>人赞了它</span>
                <div class="tags">
                    <div ref="tagsRef" class="ui fluid multiple search selection dropdown ${isSuper || blog.openEdit || blog.creator.username == loginUser.username ? '' : 'disabled'}">
                        <input name="tags" type="hidden">
                        <!-- <i class="dropdown icon"></i> -->
                        <div class="default text">标签</div>
                        <div class="menu">
                            <div repeat.for="item of tags" class="item" data-value="${item.name}">${item.name}</div>
                        </div>
                    </div>
                </div>
            </div>
            <em-blog-comment blog.bind="blog"></em-blog-comment>
        </div>
        <div show.bind="!blog" class="em-blog-content">
            <div class="ui positive icon huge message transition">
                <i class="info circle icon"></i>
                <div class="content">
                    <div class="header">
                        欢迎使用TMS博文进行知识的分享总结!
                    </div>
                    <span>现在就去创建自己的博文吧!</span> <a click.delegate="createHandler()" class="ui mini blue button">创建</a>
                </div>
            </div>
            <div ref="feedRef" class="ui segment feed">
                <h3 class="ui dividing header">
                <i class="icon feed"></i>
                <div class="content">博文更新</div>
                </h3>
                <button click.delegate="refreshFeedHandler()" style="position: absolute; right: 0; top: 2px;" class="circular ui icon button ${(ajaxS && ajaxS.readyState != 4) ? 'disabled' : ''}" data-tooltip="刷新博文更新" data-position="top right">
                    <i class="icon refresh ${(ajaxS && ajaxS.readyState != 4) ? 'loading' : ''}" "></i>
                </button>
                <div if.bind="!logs || logs.length==0 " class="ui info massive message ">
                    ${(ajaxS && ajaxS.readyState != 4) ? '博文更新内容加载中...' : '暂无博文更新!'}
                </div>
                <div repeat.for="item of logs " mouseleave.trigger="feedEventItemMouseleaveHandler(item) " class="event ${item.isOpen ? 'opened' : ''} ">
                    <div class="label ">
                        <em-user-avatar user.bind="item.creator "></em-user-avatar>
                    </div>
                    <div class="content ">
                        <div class="summary ">
                            <a class="user author " data-value="${item.creator.username} ">${item.creator.name}</a>
                            <template if.bind="item.target=='Blog' ">
                                <span if.bind="item.action=='Create' ">创建了博文 <a href="#/blog/${item.targetId} ">${item.newValue}</a></span>
                                <span if.bind="item.action=='Delete' ">删除了博文 <a href="javascript:void(0); ">${item.newValue}</a></span>
                                <template if.bind="item.action=='Update' && item.properties=='content' ">
                                    <span>更新了博文 <a href="#/blog/${item.targetId} ">${item.oldValue}</a> 的内容</span>
                                </template>
                                <template if.bind="item.action=='Update' && item.properties=='title' ">
                                    <span>更新了博文 <a href="#/blog/${item.targetId} ">${item.newValue}</a> 的标题</span>
                                </template>
                                <template if.bind="item.action=='Update' && item.properties=='privated' ">
                                    <span>更新了博文 <a href="#/blog/${item.targetId} ">${item.oldValue}</a> 的可见性</span>
                                </template>
                                <template if.bind="item.action=='Update' && item.properties=='opened' ">
                                    <span>更新了博文 <a href="#/blog/${item.targetId} ">${item.oldValue}</a> 的可见性</span>
                                </template>
                                <template if.bind="item.action=='Update' && item.properties=='space' ">
                                    <span>更新了博文 <a href="#/blog/${item.targetId} ">${item.oldValue}</a> 的所属空间</span>
                                </template>
                                <template if.bind="item.action=='Update' && item.properties=='openEdit' ">
                                    <span>${item.newValue == 'true' ? '开放' : '关闭'}了博文 <a href="#/blog/${item.targetId} ">${item.oldValue}</a> 的协作编辑权限</span>
                                </template>
                                <template if.bind="item.action=='Update' && item.properties=='voteZan' ">
                                    <span>投票赞了博文 <a href="#/blog/${item.targetId} ">${item.newValue}</a> </span>
                                </template>
                                <template if.bind="item.action=='Update' && item.properties=='stow' ">
                                    <span>收藏了博文 <a href="#/blog/${item.targetId} ">${item.newValue}</a> </span>
                                </template>
                                <template if.bind="item.action=='Update' && item.properties=='follower' ">
                                    <span>关注了博文 <a href="#/blog/${item.targetId} ">${item.newValue}</a> </span>
                                </template>
                            </template>
                            <template if.bind="item.target=='Comment' ">
                                <span if.bind="item.action=='Create' ">添加了评论 <a href="#/blog/${item.oldValue}?cid=${item.targetId} ">#${item.targetId}</a></span>
                                <span if.bind="item.action=='Delete' ">删除了评论 <a href="javascript:void(0); ">#${item.targetId}</a></span>
                                <template if.bind="item.action=='Update' && item.properties=='content' ">
                                    <span>更新了评论 <a href="#/blog/${item.oldValue}?cid=${item.targetId} ">#${item.targetId}</a> 的内容</span>
                                </template>
                                <template if.bind="item.action=='Update' && item.properties=='voteZan' ">
                                    <span>投票赞了评论 <a href="#/blog/${item.newValue}?cid=${item.targetId} ">#${item.targetId}</a> </span>
                                </template>
                            </template>
                            <div class="date " title="${item.createDate | date} ">
                                ${item.createDate | timeago}
                            </div>
                        </div>
                        <template if.bind="item.target=='Blog' ">
                            <template if.bind="item.action=='Update' && item.properties=='content' ">
                                <div class="extra text ">
                                    <!-- <div textcontent.bind="item.newValue "></div> -->
                                    <div innerhtml.bind="item.newValue | diffHtml "></div>
                                    <div class="btn-open " click.delegate="openFeedEventItemHandler(item) ">
                                        <i title="${item.isOpen ? '点击收起' : '点击展开'} " class="angle double ${item.isOpen ? 'up' : 'down'} large icon "></i>
                                    </div>
                                </div>
                            </template>
                            <template if.bind="item.action=='Update' && item.properties=='title' ">
                                <div class="extra text ">原标题: ${item.oldValue}</div>
                            </template>
                            <template if.bind="item.action=='Update' && item.properties=='privated' ">
                                <div class="extra text ">可见性修改为: ${item.newValue == 'true' ? '私有' : '公开'}</div>
                            </template>
                            <template if.bind="item.action=='Update' && item.properties=='opened' ">
                                <div class="extra text ">可见性修改为: ${item.newValue == 'true' ? '游客(匿名访客)可见' : '游客(匿名访客)不可见'}</div>
                            </template>
                            <template if.bind="item.action=='Update' && item.properties=='space' ">
                                <div class="extra text ">所属空间修改为: ${item.newValue}</div>
                            </template>
                        </template>
                        <template if.bind="item.target=='Comment' ">
                            <template if.bind="item.action=='Create' ">
                                <div ref="mkbodyRef2 " class="extra text markdown-body ">
                                    <div swipebox innerhtml.bind="item.newValue | parseMd | emoji:mkbodyRef2 "></div>
                                    <div class="btn-open " click.delegate="openFeedEventItemHandler(item) ">
                                        <i title="${item.isOpen ? '点击收起 (o)' : '点击展开 (o)'} " class="angle double ${item.isOpen ? 'up' : 'down'} large icon "></i>
                                    </div>
                                </div>
                            </template>
                            <template if.bind="item.action=='Delete' ">
                                <div ref="mkbodyRef2 " class="extra text markdown-body ">
                                    <div swipebox innerhtml.bind="item.newValue | parseMd | emoji:mkbodyRef2 "></div>
                                    <div class="btn-open " click.delegate="openFeedEventItemHandler(item) ">
                                        <i title="${item.isOpen ? '点击收起 (o)' : '点击展开 (o)'} " class="angle double ${item.isOpen ? 'up' : 'down'} large icon "></i>
                                    </div>
                                </div>
                            </template>
                            <template if.bind="item.action=='Update' && item.properties=='content' ">
                                <div class="extra text ">
                                    <div innerhtml.bind="item.newValue | diffHtml "></div>
                                    <div class="btn-open " click.delegate="openFeedEventItemHandler(item) ">
                                        <i title="${item.isOpen ? '点击收起 (o)' : '点击展开 (o)'} " class="angle double ${item.isOpen ? 'up' : 'down'} large icon "></i>
                                    </div>
                                </div>
                            </template>
                            <template if.bind="item.action=='Update' && item.properties=='voteZan' ">
                                <div ref="mkbodyRef2 " class="extra text markdown-body ">
                                    <div swipebox innerhtml.bind="item.oldValue | parseMd | emoji:mkbodyRef2 "></div>
                                    <div class="btn-open " click.delegate="openFeedEventItemHandler(item) ">
                                        <i title="${item.isOpen ? '点击收起 (o)' : '点击展开 (o)'} " class="angle double ${item.isOpen ? 'up' : 'down'} large icon "></i>
                                    </div>
                                </div>
                            </template>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div css="width: ${progressWidth}px; " class="tms-blog-progress "></div>
    <em-confirm-modal em-confirm-modal.ref="emConfirmModal "></em-confirm-modal>
    <em-blog-space-update view-model.ref="blogSpaceUpdateVm "></em-blog-space-update>
    <em-blog-history view-model.ref="blogHistoryVm "></em-blog-history>
    <em-blog-space-auth view-model.ref="blogSpaceAuthVm "></em-blog-space-auth>
</template>
